import React, {Component} from 'react';
import './Daily.css';
import {Table, Button, Input} from "element-react";

class Daily extends Component{
    constructor (props) {
        super(props)
        this.state = {
            data: [{
                id: 1,
                memo: '备注1'
            }, {
                id: 2,
                memo: '备注2'
            }],
            columns: [{
                label: "项目",
                prop: "name",
                width: 300,
                align: 'center'
            },{
                label: "任务",
                prop: "address",
                align: 'center'
            },{
                label: "开始日期",
                prop: "address",
                align: 'center'
            },{
                label: "计划完成",
                prop: "address",
                align: 'center'
            },{
                label: "当前完成情况",
                prop: "address",
                align: 'center',
                width: 240
            },{
                label: "备注",
                prop: "memo",
                align: 'center',
                render: (text, recode) => {
                    return (
                        <span>
                           <Input value={text.memo} onChange={this.onChange.bind(this,'memo', text)}></Input>
                        </span>
                    )
                }
            }]
        }
    }
    onChange (e, key, str) {
        let arr = JSON.parse(JSON.stringify(this.state.data))
        arr.forEach((item, index) => {
            if(item.id === key.id) {
                console.log(arr[index][e])
                arr[index][e] = str
            }
        })
        this.setState({
            data: arr
        });
    }
    render () {
        return (
            <div className="daily">
                <Button type="primary" size="middle" className="daily-btn">提交</Button>
                <Table
                    className="daily-table"
                    style={{width: '100%'}}
                    border
                    columns={this.state.columns}
                    data={this.state.data}
                />
            </div>
        )
    }
}

export default Daily